websoft-cms/pages/article/[id].vue

<template>
  <div class="banner h-[60px]">
    <el-image :src="form?.photo"></el-image>
  </div>
  <div class="flex flex-col w-full md:w-3/4 m-auto my-3">

    <el-breadcrumb class="py-2" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="form?.parentName">{{ form.parentName }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="form?.categoryName">{{ form.categoryName }}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20" class="mt-3">
      <el-col :span="18">
        <div class="news-list p-4 bg-white">
          <ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled" style="overflow:auto">
            <li v-for="item in list">
              <div class="item flex gap-xl mb-5 h-[120px] w-full hover:bg-gray-50">
                <div class="item-image">
                  <el-image :src="item.image" class="w-[180px] h-[120px] bg-gray-50 cursor-pointer" fit="contain" />
                </div>
                <div class="item-info py-2 flex flex-col justify-between">
                  <a :href="`/article/detail/${item.articleId}`" target="_blank" class="text-xl">{{ item.title }}</a>
                  <div class="desc text-gray-5" v-html="item.comments"></div>
                  <div class="actions text-gray-4 text-sm flex gap-2xl">
                    <span href="#">{{ item.updateTime }}</span>
                    <span href="#">浏览：{{ item.actualViews }}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <div class="text-center text-gray-4">
            <text v-if="disabled">没有更多了</text>
            <text @click="load" v-else>加载更多</text>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="hot-new bg-white p-1">
          <div class="title bg-gray-50 p-2 flex items-center gap-xs"><el-icon><ElIconLink/></el-icon>最新推荐</div>
          <div class="news-list p-3">
            <a class="item py-1 block cursor-pointer" v-for="(item,index) in list">
              {{item.title}}
            </a>
          </div>
        </div>
        <div class="view-rank bg-white p-1 mt-5">
          <div class="title bg-gray-50 p-2 flex items-center gap-xs"><el-icon><ElIconLink/></el-icon>点击排行</div>
          <div class="news-list p-3">
            <a class="item py-1 block cursor-pointer" v-for="(item,index) in list">
              {{item.title}}
            </a>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <el-divider />
  <div v-if="!list">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import type {Article} from "~/api/cms/article/model";
import {useRequest} from "~/composables/useRequest";
import type {Design} from "~/api/cms/design/model";
import {useClientRequest} from "~/composables/useClientRequest";
import {pageArticle} from "~/api/cms/article";

const route = useRoute();
const { query, params } = route;
const { id } = params;

// 页面信息
const list = ref<Article[]>([]);
const title = ref();
const categoryName = ref();
const count = ref()
const page = ref<number>(1);
const disabled = ref<boolean>(false);
const newList = ref<Article[]>();

// 页面信息
const form = ref<Design | any>();

const load = () => {
  if(!disabled.value){
    page.value++;
    reload();
  }
}

// 请求数据
const reload = async () => {
  await useRequest<ApiResult<PageResult<Article>>>('/cms/article/page',{
    params: {
      page: page.value,
      categoryId: id
    }
  }).then(res => {
    const data = res.data.value?.data;
    count.value = data?.count;
    if (data?.list.length == 0) {
      disabled.value = true;
      return false;
    }
    if (page.value == 0) {
      list.value = data?.list;
    }else {
      list.value = list.value.concat(data?.list);
    }

    // list.value = articleList.value.data?.list;
    list.value.map((d,i)=>{
      if(i === 0){
        categoryName.value = d.categoryName;
        form.value = d;
        useHead({
          title: `${d.categoryName} - 网宿软件`,
          meta: [{ name: "keywords", content: d.title }],
          bodyAttrs: {
            class: "page-container",
          },
          script: [
            {
              children: "console.log('Hello World')",
            },
          ],
        });
      }
    });
  })

}

reload();
</script>

<style scoped lang="scss">

</style>